<template>
<div id="goods-add">
  <el-form ref="form" :rules="rules" :model="goods" label-width="80px">
    <el-row>
      <el-col :span="8">
        <el-form-item label="物品名称" prop="name">
          <el-input v-model="goods.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="所属人" prop="belonger">
          <el-input v-model="goods.belonger"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="联系方式" prop="belonger">
          <el-input v-model="goods.contact"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="价格" prop="price">
          <el-input v-model="goods.price"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="原价" prop="originalPrice">
          <el-input v-model="goods.originalPrice"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="购买时间" prop="buyTime">
          <el-date-picker v-model="goods.buyTime" type="month" placeholder="选择月">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="分类" prop="classify">
          <el-cascader v-model="goods.classify" :options="classifyData" :props="{expandTrigger: 'hover', value:'lid', checkStrictly:'true' }" @change="selectClassify"></el-cascader>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="详细描述" prop="desc">
          <el-input type="textarea" v-model="goods.desc"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="物品图片" style="text-align: left;">
          <el-upload list-type="picture-card" action="/shs/photo/upload" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="uploadPhotoSuccess">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item>
          <el-button type="primary" @click="save">发布</el-button>
          <el-button>
            <router-link :to="{name:'goods-list'}" tag="span">取消</router-link>
          </el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</div>
</template>

<script>
import _ from 'lodash';
import http from '@/components/service/http.js'

export default {
  name: 'goodsAdd',
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      classifyData: [],
      goods: {
        name: '',
        belonger: '',
        originalPrice: '',
        price: '',
        contact: '',
        classify: '',
        desc: '',
        buyTime: '',
        photoIds: []
      },
      rules: {
        name: [{
          required: true,
          message: '请输入物品名称',
          trigger: 'blur'
        }],
        belonger: [{
          required: true,
          message: '请输入物品所属人',
          trigger: 'blur'
        }],
        originalPrice: [{
          required: true,
          message: '请输入物品原价',
          trigger: 'blur'
        }],
        price: [{
          required: true,
          message: '请输入物品价格',
          trigger: 'blur'
        }],
        classify: [{
          required: true,
          message: '请输入物品分类',
          trigger: 'blur'
        }],
        desc: [{
          required: true,
          message: '请填写详细描述',
          trigger: 'blur'
        }]
      }
    }
  },
  created() {
    this.getCurrentUser();
    this.getClassifyData();
  },
  methods: {
    getCurrentUser: function () {
      var This = this;
      http.get('/shs/user/getInfo')
        .then(function (response) {
          // This.user = response.data;
          This.goods.belonger = response.data.nickName;
          This.goods.contact = response.data.contact;
        })
    },
    getClassifyData: function () {
      var This = this;
      http.get('/shs/classify/getList')
        .then(function (response) {
          This.classifyData = response.data
        })
    },
    handleRemove(file) {
      this.goods.photoIds = _.remove(this.goods.photoIds, file.response);
      this.removePhoto(file.response);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    uploadPhotoSuccess(response) {
      this.goods.photoIds.push(response)
    },
    selectClassify() {
      console.log(this.goods.classify)
    },
    save() {
      var This = this;
      this.$refs['form'].validate((valid) => {
        if (valid) {
          http.post('/shs/goods/save', This.goods)
            .then(function () {
              This.$router.push({
                name: "goods-list"
              });
              This.$message({
                showClose: false,
                message: "发布成功",
                type: "success",
                duration: 3000,
                center: true
              });
            })
        } else {
          return false;
        }
      });
    },
    removePhoto(fileId) {
      http.get('/shs/photo/delete/' + fileId)
    }
  }
}
</script>

<style>
#goods-add {
  margin-top: 20px;
  width: 100%;
}

#goods-add .el-date-editor.el-input {
  width: 100%;
}

#goods-add .el-cascader {
  width: 100%;
}
</style>
